<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>AILabel与你一路同行</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<h1 id="-">概述</h1>
<p>在前端开发过程中难免遇到针对图片的缩放平移；以及在图片上进行矢量数据、文本、标注的展示； 如果你有上面的任何需求，恭喜你，找到组织了....在此背景下，AILabel.js诞生了</p>
<hr>
<h2 id="-">特性</h2>
<blockquote>
<ol>
<li>多类型要素展示：图片/矢量数据/文本/标注</li>
<li>高效绘图：canvas矢量数据绘制</li>
<li>使用方便简单 ✨✨✨✨✨</li>
</ol>
</blockquote>
<h2 id="-">名词解释</h2>
<ol>
<li>zoom：容器宽代表的实际距离宽</li>
<li>实际坐标系：要素或实体代表的实际坐标值所在的坐标系</li>
<li>屏幕标注系：用来展示的坐标系</li>
<li>...</li>
</ol>
<h2 id="-">授权</h2>
<p>....</p>
<h1 id="ailabel-map">AILabel.Map</h1>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// js: 伪代码
const gMap = new AILabel.Map(domId: string, mapOptions?: IMapOptions);
// js: demo【gMap将作为后续使用的容器实例，不再进行重复实例操作】
const gMap = new AILabel.Map(&#39;map&#39;, {
   center: {x: 0, y: 0},
   zoom: 800,
   mode: &#39;PAN&#39; // 绘制线段
});
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>domId</td>
<td>Dom容器id</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>mapOptions</td>
<td>可选配置项</td>
<td>否</td>
<td>--</td>
<td>IMapOptions</td>
</tr>
</tbody>
</table>
<p><strong>IMapOptions</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>zoom</td>
<td>初始缩放级别</td>
<td>否</td>
<td>1000</td>
<td>number</td>
</tr>
<tr>
<td>center</td>
<td>初始中心点坐标</td>
<td>否</td>
<td>--</td>
<td>IPoint</td>
</tr>
<tr>
<td>size</td>
<td>容器大小设置</td>
<td>否</td>
<td>null（会获取dom：clientWidth[Height]）</td>
<td>ISize</td>
</tr>
<tr>
<td>mode</td>
<td>当前操作模式</td>
<td>否</td>
<td>&#39;PAN&#39;</td>
<td>EMapMode枚举-见下文</td>
</tr>
<tr>
<td>refreshDelayWhenZooming</td>
<td>持续缩放是否延时刷新features（如滑轮缩放时），性能优化</td>
<td>否</td>
<td>true</td>
<td>boolean</td>
</tr>
<tr>
<td>zoomWhenDrawing</td>
<td>绘制时可滑轮缩放</td>
<td>否</td>
<td>false</td>
<td>boolean</td>
</tr>
<tr>
<td>panWhenDrawing</td>
<td>绘制时可到边界外自动平移</td>
<td>否</td>
<td>false</td>
<td>boolean</td>
</tr>
<tr>
<td>featureCaptureWhenMove</td>
<td>绘制过程中是否开启‘双击选中’tip提示，耗费性能（会持续进行move捕捉判断）</td>
<td>否</td>
<td>false</td>
<td>boolean</td>
</tr>
<tr>
<td>withHotKeys</td>
<td>快捷键开关</td>
<td>否</td>
<td>true</td>
<td>boolean</td>
</tr>
<tr>
<td>zoomWheelRatio</td>
<td>鼠标滑轮缩放大小,取值区间[0, 10)，zoomWheelRatio越小，代表缩放速度越快，反之越慢</td>
<td>否</td>
<td>5</td>
<td>number</td>
</tr>
</tbody>
</table>
<p><strong>IPoint</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>x坐标</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>y</td>
<td>y坐标</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
</tbody>
</table>
<p><strong>ISize</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>宽</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>height</td>
<td>高</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="setmode">setMode</h2>
<p>AILabel.Map实例设置当前模式</p>
<pre><code class="lang-javascript">gMap.setMode(mode: EMapMode);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>mode</td>
<td>操作模式</td>
<td>是</td>
<td>--</td>
<td>EMapMode枚举</td>
</tr>
</tbody>
</table>
<p><strong>EMapMode</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>PAN</td>
<td>平移</td>
<td>string</td>
</tr>
<tr>
<td>BAN</td>
<td>禁用视野缩放平移</td>
<td>string</td>
</tr>
<tr>
<td>POINT</td>
<td>绘制点</td>
<td>string</td>
</tr>
<tr>
<td>CIRCLE</td>
<td>绘制圆</td>
<td>string</td>
</tr>
<tr>
<td>LINE</td>
<td>绘制线</td>
<td>string</td>
</tr>
<tr>
<td>POLYLINE</td>
<td>绘制多段线</td>
<td>string</td>
</tr>
<tr>
<td>RECT</td>
<td>绘制矩形</td>
<td>string</td>
</tr>
<tr>
<td>POLYGON</td>
<td>绘制多边形</td>
<td>string</td>
</tr>
<tr>
<td>DRAWMASK</td>
<td>绘制涂抹</td>
<td>string</td>
</tr>
<tr>
<td>CLEARMASK</td>
<td>擦除涂抹</td>
<td>string</td>
</tr>
<tr>
<td>IMAGEMASK</td>
<td>绘制涂抹（Image形式）</td>
<td>string</td>
</tr>
</tbody>
</table>
<h2 id="setzoomwheelratio">setZoomWheelRatio</h2>
<p>AILabel.Map实例设置滑轮缩放比例, 取值区间[0, 10)</p>
<pre><code class="lang-javascript">gMap.setZoomWheelRatio(0);
</code></pre>
<h2 id="setdrawingstyle">setDrawingStyle</h2>
<p>AILabel.Map设置绘制过程中的样式</p>
<pre><code class="lang-javascript">gMap.setDrawingStyle(drawingStyle: IFeatureStyle);
</code></pre>
<p><strong>IFeatureStyle</strong></p>
<p>canvas样式：比如lineWidth/strokeStyle/fillStyle等</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>lineWidth</td>
<td>线宽</td>
<td>否</td>
<td>1</td>
<td>number</td>
</tr>
<tr>
<td>strokeStyle</td>
<td>边框颜色</td>
<td>否</td>
<td>&#39;#FF0000&#39;</td>
<td>boolean</td>
</tr>
<tr>
<td>fillStyle</td>
<td>填充色</td>
<td>否</td>
<td>&#39;#FF0000&#39;</td>
<td>boolean</td>
</tr>
<tr>
<td>自定义：arrow</td>
<td>是否绘制箭头（只针对线段）</td>
<td>否</td>
<td>false</td>
<td>boolean</td>
</tr>
<tr>
<td>自定义：stroke</td>
<td>是否闭合</td>
<td>否</td>
<td>true</td>
<td>boolean</td>
</tr>
<tr>
<td>自定义：fill</td>
<td>是否填充</td>
<td>否</td>
<td>false</td>
<td>boolean</td>
</tr>
<tr>
<td>其他配置</td>
<td>--</td>
<td>否</td>
<td>--</td>
<td>--</td>
</tr>
</tbody>
</table>
<h2 id="seteditingcolor">setEditingColor</h2>
<p>AILabel.Map设置编辑时拖拽对象的绘制颜色</p>
<pre><code class="lang-javascript">gMap.setEditingColor(&#39;#000&#39;);
</code></pre>
<h2 id="enabledrawingtip">enableDrawingTip</h2>
<p>AILabel.Map设置绘制过程中提示文字开启【默认开启】</p>
<pre><code class="lang-javascript">gMap.enableDrawingTip();
</code></pre>
<h2 id="disabledrawingtip">disableDrawingTip</h2>
<p>AILabel.Map设置绘制过程中提示文字关闭</p>
<pre><code class="lang-javascript">gMap.disableDrawingTip();
</code></pre>
<h2 id="enabledrawingcrosshair">enableDrawingCrosshair</h2>
<p>AILabel.Map设置绘制过程中十字丝开启</p>
<pre><code class="lang-javascript">gMap.enableDrawingCrosshair();
</code></pre>
<h2 id="disabledrawingcrosshair">disableDrawingCrosshair</h2>
<p>AILabel.Map设置绘制过程中十字丝关闭</p>
<pre><code class="lang-javascript">gMap.disableDrawingCrosshair();
</code></pre>
<h2 id="enablehotkeys">enableHotKeys</h2>
<p>AILabel.Map设置快捷键开启</p>
<pre><code class="lang-javascript">gMap.enableHotKeys();
</code></pre>
<h2 id="disablehotkeys">disableHotKeys</h2>
<p>AILabel.Map设置快捷键关闭</p>
<pre><code class="lang-javascript">gMap.disableHotKeys();
</code></pre>
<h2 id="enablezoomwhendrawing">enableZoomWhenDrawing</h2>
<p>开启绘制时可鼠标滑轮缩放</p>
<pre><code class="lang-javascript">// define
enableZoomWhenDrawing()
// demo
gMap.enableZoomWhenDrawing();
</code></pre>
<h2 id="disablezoomwhendrawing">disableZoomWhenDrawing</h2>
<p>禁用绘制时可鼠标滑轮缩放</p>
<pre><code class="lang-javascript">// define
disableZoomWhenDrawing()
// demo
gMap.disableZoomWhenDrawing();
</code></pre>
<h2 id="enablepanwhendrawing">enablePanWhenDrawing</h2>
<p>开启绘制时鼠标达到边界外自动平移</p>
<pre><code class="lang-javascript">// define
enablePanWhenDrawing()
// demo
gMap.enablePanWhenDrawing();
</code></pre>
<h2 id="disablepanwhendrawing">disablePanWhenDrawing</h2>
<p>禁用绘制时鼠标达到边界外自动平移</p>
<pre><code class="lang-javascript">// define
disablePanWhenDrawing()
// demo
gMap.disablePanWhenDrawing();
</code></pre>
<h2 id="getsize">getSize</h2>
<p>获取传入容器的大小</p>
<pre><code class="lang-javascript">// define
getSize(): ISize
// demo
const containerSize = gMap.getSize();
</code></pre>
<p><strong>ISize</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>宽</td>
<td>number</td>
</tr>
<tr>
<td>height</td>
<td>高</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="getscale">getScale</h2>
<p>获取当前缩放比例 (containerWidth / zoom)</p>
<pre><code class="lang-javascript">// define
getScale(zoom?: number): number
// demo
const scale = gMap.getScale();
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>zoom</td>
<td>缩放值</td>
<td>否</td>
<td>map.zoom</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="setcenter">setCenter</h2>
<p>设置中心点（即容器的中心点对应的实际坐标的中心点）</p>
<pre><code class="lang-javascript">// define
setCenter(center: IPoint): Map
// demo
gMap.setCenter(center);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>center</td>
<td>中心点</td>
<td>是</td>
<td>--</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<h2 id="getcenter">getCenter</h2>
<p>获取中心点（即容器的中心点对应的实际坐标的中心点）</p>
<pre><code class="lang-javascript">// define
getCenter(): IPoint
// demo
const center = gMap.getCenter();
</code></pre>
<h2 id="getscreencenter">getScreenCenter</h2>
<p>获取屏幕中心点坐标（即containerWidth/2, containerHeight/2）</p>
<pre><code class="lang-javascript">// define
getScreenCenter(): IPoint
// demo
const center = gMap.getScreenCenter();
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>zoom</td>
<td>缩放值</td>
<td>否</td>
<td>map.zoom</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="getbounds">getBounds</h2>
<p>获取视野范围</p>
<pre><code class="lang-javascript">// define【option为预留参数字段】
getBounds(option?: IObject = {}): IRectShape
// demo
const bounds = gMap.getBounds();
</code></pre>
<p><strong>IRectShape</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>左上角坐标x</td>
<td>number</td>
</tr>
<tr>
<td>y</td>
<td>左上角坐标y</td>
<td>number</td>
</tr>
<tr>
<td>width</td>
<td>宽度</td>
<td>number</td>
</tr>
<tr>
<td>height</td>
<td>高度</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="centerandzoom">centerAndZoom</h2>
<p>定位并缩放到指定位置</p>
<pre><code class="lang-javascript">// define
centerAndZoom(option: ICenterAndZoom): Map
// demo
const bounds = gMap.centerAndZoom({center: {x,y}, zoom: 1000});
</code></pre>
<p><strong>ICenterAndZoom</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>center</td>
<td>定位到的位置</td>
<td>否</td>
<td>map.center</td>
<td>IPoint</td>
</tr>
<tr>
<td>zoom</td>
<td>缩放值</td>
<td>否</td>
<td>map.zoom</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="zoomin">zoomIn</h2>
<p>放大</p>
<pre><code class="lang-javascript">// define
zoomIn()
// demo
gMap.zoomIn();
</code></pre>
<h2 id="zoomout">zoomOut</h2>
<p>缩小</p>
<pre><code class="lang-javascript">zoomOut()
// demo
gMap.zoomOut();
</code></pre>
<h2 id="addlayer">addLayer</h2>
<p>添加Layer至当前Map实例</p>
<pre><code class="lang-javascript">// define
addLayer(layer: Layer)
// demo
const featureLayer = new AILabel.Layer.Feature(...);
gMap.addLayer(featureLayer);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>layer</td>
<td>待添加图层</td>
<td>是</td>
<td>--</td>
<td>Layer</td>
</tr>
</tbody>
</table>
<p><strong>Layer</strong>
详细解释见Layer：api
|参数|说明|类型|
|---|---|---|
|Image|图片图层|AILabel.Layer.Image|
|Feature|矢量图层|AILabel.Layer.Feature|
|Mask|涂抹图层|AILabel.Layer.Mask|
|Text|文本图层|AILabel.Layer.Text|</p>
<h2 id="removelayerbyid">removeLayerById</h2>
<p>删除指定layerId的图layer</p>
<pre><code class="lang-javascript">// define
removeLayerById(targetLayerId: string)
// demo
const featureLayer = new AILabel.Layer.Feature(...);
gMap.addLayer(featureLayer);
gMap.removeLayerById(featureLayer.id);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>targetLayerId</td>
<td>待删除图层id</td>
<td>是</td>
<td>--string</td>
</tr>
</tbody>
</table>
<h2 id="removealllayers">removeAllLayers</h2>
<p>删除所有layers【内置图层除外】</p>
<pre><code class="lang-javascript">// define
removeAllLayers()
// demo
const featureLayer = new AILabel.Layer.Feature(...);
gMap.addLayer(featureLayer);
gMap.removeAllLayers();
</code></pre>
<h2 id="getlayers">getLayers</h2>
<p>获取当前map实例上的所有layer</p>
<pre><code class="lang-javascript">// define
getLayers(): Array&lt;Layer&gt;
// demo
const allLayers = gMap.getLayers();
</code></pre>
<h2 id="refresh">refresh</h2>
<p>刷新map</p>
<pre><code class="lang-javascript">// define
refresh()
// demo
gMap.refresh();
</code></pre>
<h2 id="resize">resize</h2>
<p>大小重设map，可以指定size大小或者不传入(会自动获取dom-size大小进行重设)</p>
<pre><code class="lang-javascript">// define
resize(size?: ISize)
// demo
gMap.resize();
</code></pre>
<h2 id="setactivefeature">setActiveFeature</h2>
<p>设置map当前的待编辑feature，最多只会存在一个activeFeature</p>
<pre><code class="lang-javascript">// define
setActiveFeature(feature: Feature | null)
// demo
// 设置编辑feature，需要配合gMap.events.on(&#39;featureSelected&#39;)使用【后续事件部分会详细讲解】
gMap.setActiveFeature(feature);
// 取消编辑对象，需要配合gMap.events.on(&#39;featureUnselected&#39;)使用【后续事件部分会详细讲解】
gMap.setActiveFeature(null);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>feature</td>
<td>待编辑feature</td>
<td>是</td>
<td>--</td>
<td>Feature或null</td>
</tr>
</tbody>
</table>
<h2 id="getactivefeature">getActiveFeature</h2>
<p>获取当前activeFeature</p>
<pre><code class="lang-javascript">// define
getActiveFeature(): Feature | null
// demo
gMap.getActiveFeature();
</code></pre>
<h2 id="gettargetfeaturewithpoint">getTargetFeatureWithPoint</h2>
<p>获取命中的矢量Feature对象，没有命中，则返回null</p>
<pre><code class="lang-javascript">// define
getTargetFeatureWithPoint(globalPoint: IPoint): Feature | null
// demo
const targetFeature = gMap.getTargetFeatureWithPoint(point);
</code></pre>
<h2 id="transformscreentoglobal">transformScreenToGlobal</h2>
<p>屏幕坐标转实际坐标</p>
<pre><code class="lang-javascript">// define
transformScreenToGlobal(screenPoint: IPoint): IPoint
// demo
const globalPoint = gMap.transformScreenToGlobal({x, y});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>screenPoint</td>
<td>待转换屏幕坐标</td>
<td>是</td>
<td>--</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<h2 id="transformglobaltoscreen">transformGlobalToScreen</h2>
<p>实际坐标转屏幕坐标</p>
<pre><code class="lang-javascript">// define
transformGlobalToScreen(globalPoint: IPoint): IPoint
// demo
const screenPoint = gMap.transformGlobalToScreen({x, y});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>globalPoint</td>
<td>待转换实际坐标</td>
<td>是</td>
<td>--</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<h2 id="exportlayerstoimage">exportLayersToImage</h2>
<p>AILabel.Map将layers导出为图片（支持导出text/image/feature/mask等图层，“图片不能跨域“）</p>
<pre><code class="lang-javascript">// define
exportLayersToImage(bounds: IRectShape, option: IExportOption = {})
// demo
const base64 = await gMap.exportLayersToImage(
        {x: 0, y: 0, width: 500, height: 354},
        {type: &#39;base64&#39;, format: &#39;image/png&#39;}
    );
const blob = await gMap.exportLayersToImage(
        {x: 0, y: 0, width: 500, height: 354},
        {type: &#39;blob&#39;, format: &#39;image/png&#39;}
    );
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>bounds</td>
<td>导出视野范围</td>
<td>是</td>
<td>--</td>
<td>IRectShape</td>
</tr>
<tr>
<td>option</td>
<td>其他可选项配置</td>
<td>否</td>
<td>--</td>
<td>IExportOption</td>
</tr>
</tbody>
</table>
<p><strong>IExportOption</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>layers</td>
<td>导出图层list</td>
<td>否</td>
<td>当前Map上的layers</td>
<td>Layer[]</td>
</tr>
<tr>
<td>type</td>
<td>导出数据形式（支持base64或blob)</td>
<td>否</td>
<td>base64</td>
<td>string</td>
</tr>
<tr>
<td>format</td>
<td>图片格式（支持image/png或image/jpeg)</td>
<td>否</td>
<td>image/png</td>
<td>string</td>
</tr>
</tbody>
</table>
<h2 id="destroy">destroy</h2>
<p>AILabel.Map实例销毁【如果在切换实例时最好要将上一次实例进行destroy】</p>
<pre><code class="lang-javascript">gMap &amp;&amp; gMap.destroy();
</code></pre>
<h2 id="events">events</h2>
<p>事件监听</p>
<pre><code class="lang-javascript">// define
events.on(eventType: EEventType, callback: Function);
// demo
gMap.events.on(&#39;boundsChanged&#39;, () =&gt; {console.log(&#39;bounds has changed&#39;)});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>eventType</td>
<td>时间枚举类型</td>
<td>是</td>
<td>--</td>
<td>EEventType</td>
</tr>
<tr>
<td>callback</td>
<td>回调函数</td>
<td>是</td>
<td>--</td>
<td>Function</td>
</tr>
</tbody>
</table>
<p><strong>EEventType</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>callback</th>
</tr>
</thead>
<tbody>
<tr>
<td>boundsChanged</td>
<td>视野范围发生变化</td>
<td>string</td>
<td>BoundsChanged</td>
</tr>
<tr>
<td>featureSelected</td>
<td>在绘制模式下双击feature触发选中</td>
<td>string</td>
<td>FeatureSelected</td>
</tr>
<tr>
<td>featureUnselected</td>
<td>当模式切换或单击其他地方触发</td>
<td>string</td>
<td>FeatureUnselected</td>
</tr>
<tr>
<td>drawDone</td>
<td>绘制结束时触发</td>
<td>string</td>
<td>DrawDone</td>
</tr>
<tr>
<td>featureUpdated</td>
<td>feature编辑完成触发</td>
<td>string</td>
<td>FeatureUpdated</td>
</tr>
<tr>
<td>featureDeleted</td>
<td>目前只针对点双击选中右键触发</td>
<td>string</td>
<td>FeatureDeleted</td>
</tr>
<tr>
<td>click</td>
<td>单击事件</td>
<td>string</td>
<td>MouseCallback</td>
</tr>
<tr>
<td>dblClick</td>
<td>双击事件</td>
<td>string</td>
<td>MouseCallback</td>
</tr>
<tr>
<td>mouseDown</td>
<td>鼠标按下</td>
<td>string</td>
<td>MouseCallback</td>
</tr>
<tr>
<td>mouseMove</td>
<td>鼠标移动</td>
<td>string</td>
<td>MouseCallback</td>
</tr>
<tr>
<td>mouseUp</td>
<td>鼠标抬起</td>
<td>string</td>
<td>MouseCallback</td>
</tr>
<tr>
<td>mouseOut</td>
<td>鼠标移出</td>
<td>string</td>
<td>MouseCallback</td>
</tr>
<tr>
<td>mouseOver</td>
<td>鼠标进入</td>
<td>string</td>
<td>MouseCallback</td>
</tr>
</tbody>
</table>
<p><strong>BoundsChanged</strong></p>
<pre><code class="lang-javascript">// define
callback: () =&gt; void
// demo
gMap.events.on(&#39;boundsChanged&#39;, callback);
</code></pre>
<p><strong>FeatureSelected</strong></p>
<pre><code class="lang-javascript">// define
callback: (feature: Feature) =&gt; void
// demo
gMap.events.on(&#39;featureSelected&#39;, callback);
</code></pre>
<p><strong>FeatureUnselected</strong></p>
<pre><code class="lang-javascript">// define
callback: (feature: Feature) =&gt; void
// demo
gMap.events.on(&#39;featureUnselected&#39;, callback);
</code></pre>
<p><strong>DrawDone</strong></p>
<pre><code class="lang-javascript">// define
callback: (mapMode: EMapMode, shape) =&gt; void
// demo
gMap.events.on(&#39;drawDone&#39;, callback);
</code></pre>
<p><strong>FeatureUpdated</strong></p>
<pre><code class="lang-javascript">// define
callback: (feature: Feature, shape) =&gt; void
// demo
gMap.events.on(&#39;featureUpdated&#39;, callback);
</code></pre>
<p><strong>FeatureDeleted</strong></p>
<pre><code class="lang-javascript">// define [目前只针对点在选中态右键触发]
callback: (feature:PointFeature) =&gt; void
// demo
gMap.events.on(&#39;featureDeleted&#39;, callback);
</code></pre>
<p><strong>MouseCallback</strong></p>
<pre><code class="lang-javascript">// define
callback: (point:IBasePoint) =&gt; void
// demo
gMap.events.on(&#39;click&#39;, callback);
</code></pre>
<p><strong>IBasePoint</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>screen</td>
<td>屏幕坐标</td>
<td>IPoint</td>
</tr>
<tr>
<td>global</td>
<td>实际坐标</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<h2 id="slots">slots</h2>
<p>事件拦截器：callback返回值false，会阻断后续流程</p>
<pre><code class="lang-javascript">// define
slots.on(eventType: EEventSlotType, callback: Function);
// demo
// 此示例为双击选中feature对象时阻止系统默认的高亮点样式，改为自定义样式
// gMap.slots.on(&#39;drawActivePoint&#39;, (point, overLayerInstance) =&gt; {
gMap.slots.on(&#39;drawActiveMiddlePoint&#39;, (point, overLayerInstance) =&gt; {
    overLayerInstance.addCircleFeature(
        {sr: 3.5, cx: point.x, cy: point.y},
        {
            clear: false,
            style: {strokeStyle: &#39;#00f&#39;, fillStyle: &#39;#00f&#39;, stroke: true, fill: true, lineWidth: 1}
        }
    );
    return false;
});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>eventType</td>
<td>时间枚举类型</td>
<td>是</td>
<td>--</td>
<td>EEventSlotType</td>
</tr>
<tr>
<td>callback</td>
<td>回调函数</td>
<td>是</td>
<td>--</td>
<td>Function</td>
</tr>
</tbody>
</table>
<p><strong>EEventSlotType</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>callback</th>
</tr>
</thead>
<tbody>
<tr>
<td>drawActivePoint</td>
<td>绘制高亮节点触发</td>
<td>string</td>
<td>DrawActivePoint</td>
</tr>
<tr>
<td>drawActiveMiddlePoint</td>
<td>绘制高亮节点中间待添加节点触发</td>
<td>string</td>
<td>DrawActiveMiddlePoint</td>
</tr>
</tbody>
</table>
<h2 id="-">快捷键</h2>
<p>目前AILabel中内置已有快捷键</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>ctrl+z</td>
<td>绘制多段线或者多边形过程中撤销节点</td>
</tr>
<tr>
<td>up/down/left/right</td>
<td>选中feature时，可通过上/下/左/右快捷键对选中feature进行位置微调</td>
</tr>
</tbody>
</table>
<h1 id="ailabel-layer-image">AILabel.Layer.Image</h1>
<p>图片图层</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, image: IImageInfo, props: IObject = {}, style: ILayerStyle = {})
// demo
const gFirstImageLayer = new AILabel.Layer.Image(
   &#39;first-layer-image&#39;, // id
   {
       src: &#39;https://img2.baidu.com/it/u=2053804264,1341330775&amp;fm=26&amp;fmt=auto&amp;gp=0.jpg&#39;,
       width: 500, // 图片宽度
       height: 354, // 图片高度
       crossOrigin: false, // 图片是否跨域
       position: { // 图片左上角对应的坐标位置
           x: -250,
           y: 177
       },
       grid: { // 3 * 3
           columns: [{color: &#39;#9370DB&#39;}, {color: &#39;#FF6347&#39;}],
           rows: [{color: &#39;#9370DB&#39;}, {color: &#39;#FF6347&#39;}]
       }
   }, // imageInfo
   {name: &#39;第一个图片图层&#39;}, // props
   {zIndex: 5} // style
);
gMap.addLayer(gFirstImageLayer);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>image</td>
<td>图片配置信息</td>
<td>是</td>
<td>--</td>
<td>IImageInfo</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>ILayerStyle</td>
</tr>
</tbody>
</table>
<p><strong>IImageInfo</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>图片地址</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>width</td>
<td>图片宽度</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>height</td>
<td>图片高度</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>crossOrigin</td>
<td>图片是否跨域，主要用于图片导出时使用, 要根据实际情况设置，当图片导出时，需要图片的responseHeader-CORS设置允许跨域</td>
<td>否</td>
<td>false</td>
<td>boolean</td>
</tr>
<tr>
<td>position</td>
<td>图片位置</td>
<td>否</td>
<td>{x:0,y:0}</td>
<td>IPoint</td>
</tr>
<tr>
<td>grid</td>
<td>图片网格</td>
<td>否</td>
<td>{columns: [], rows: []}</td>
<td>IGridInfo</td>
</tr>
</tbody>
</table>
<p><strong>IGridInfo</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>columns</td>
<td>列配置</td>
<td>否</td>
<td>[]</td>
<td>IGridItemInfo[]</td>
</tr>
<tr>
<td>rows</td>
<td>行配置</td>
<td>否</td>
<td>[]</td>
<td>IGridItemInfo[]</td>
</tr>
</tbody>
</table>
<p><strong>IGridItemInfo</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>color</td>
<td>线颜色</td>
<td>否</td>
<td>&#39;#333333&#39;</td>
<td>string</td>
</tr>
<tr>
<td>width</td>
<td>线宽</td>
<td>否</td>
<td>1</td>
<td>number</td>
</tr>
</tbody>
</table>
<p><strong>ILayerStyle</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>zIndex</td>
<td>层级</td>
<td>否</td>
<td>1</td>
<td>number</td>
</tr>
<tr>
<td>opacity</td>
<td>透明度</td>
<td>否</td>
<td>1.0</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="updategrid">updateGrid</h2>
<p>更新网格</p>
<pre><code class="lang-javascript">// define
updateGrid(gridInfo: IGridInfo)
// demo
gFirstImageLayer.updateGrid({columns: [{color: &#39;#333&#39;}], rows: [{color: &#39;#666&#39;}]});
</code></pre>
<h2 id="events">events</h2>
<p>事件监听</p>
<pre><code class="lang-javascript">// define
events.on(eventType: ELayerImageEventType, callback: Function);
// demo
gFirstImageLayer.events.on(&#39;loadStart&#39;, (url, instance) =&gt; {
   console.log(&#39;--loadStart--&#39;);
});
gFirstImageLayer.events.on(&#39;loadEnd&#39;, (url, instance) =&gt; {
   console.log(&#39;--loadEnd--&#39;);
});
gFirstImageLayer.events.on(&#39;loadError&#39;, (url, instance) =&gt; {
   console.log(&#39;--loadError--&#39;);
});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>eventType</td>
<td>时间枚举类型</td>
<td>是</td>
<td>--</td>
<td>ELayerImageEventType</td>
</tr>
<tr>
<td>callback</td>
<td>回调函数</td>
<td>是</td>
<td>--</td>
<td>Function</td>
</tr>
</tbody>
</table>
<p><strong>ELayerImageEventType</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>loadStart</td>
<td>图片开始加载</td>
<td>LoadStart</td>
</tr>
<tr>
<td>loadEnd</td>
<td>加载成功</td>
<td>LoadEnd</td>
</tr>
<tr>
<td>loadError</td>
<td>加载失败</td>
<td>LoadError</td>
</tr>
</tbody>
</table>
<h1 id="ailabel-layer-feature">AILabel.Layer.Feature</h1>
<p>矢量图层（用于承载Feature.Point, Feature.Line, Feature.Polyline, Feature.Polygon, Feature.Rect, Feature.Circle等矢量要素的展示）</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, props: IObject = {}, style: ILayerStyle = {})
// demo
const gFirstFeatureLayer = new AILabel.Layer.Feature(
   &#39;first-layer-feature&#39;, // id
   {name: &#39;第一个矢量图层&#39;}, // props
   {zIndex: 10} // style
);
gMap.addLayer(gFirstFeatureLayer);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>ILayerStyle-上文</td>
</tr>
</tbody>
</table>
<h2 id="addfeature">addFeature</h2>
<p>添加矢量要素（Feature.Point, Feature.Line, Feature.Polyline, Feature.Polygon, Feature.Rect, Feature.Circle等）</p>
<pre><code class="lang-javascript">// define
addFeature(feature: Feature, option?: IFeatureAddOption)
// demo (AILabel.Feature.Polygon见下文)
const gFirstFeaturePolygon = new AILabel.Feature.Polygon(
   &#39;first-feature-polygon&#39;, // id
   {points: [
       {x: 0, y: 0}, {x: 100, y: 100},
       {x: 100, y: 200}
   ]}, // shape
   {name: &#39;第一个多边形&#39;}, // props
   {strokeStyle: &#39;#FFD500&#39;, lineWidth: 1} // style
);
gFirstFeatureLayer.addFeature(gFirstFeaturePolygon);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>feature</td>
<td>待添加feature</td>
<td>是</td>
<td>--</td>
<td>Feature</td>
</tr>
<tr>
<td>option</td>
<td>可选配置项</td>
<td>否</td>
<td>{clear: false}</td>
<td>IFeatureAddOption</td>
</tr>
</tbody>
</table>
<p><strong>IFeatureAddOption</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>clear</td>
<td>添加feature是否清空当前layer上已存在的features</td>
<td>否</td>
<td>false</td>
<td>boolean</td>
</tr>
</tbody>
</table>
<h2 id="removefeaturebyid">removeFeatureById</h2>
<p>移除指定featureId的feature</p>
<pre><code class="lang-javascript">// define
removeFeatureById(targetFeatureId: string)
// demo
const polygonFeature = new AILabel.Feature.Polygon(...);
gFirstFeatureLayer.addFeature(polygonFeature);
gFirstFeatureLayer.removeFeatureById(polygonFeature.id);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>targetFeatureId</td>
<td>待删除feature-id</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
</tbody>
</table>
<h2 id="getfeaturebyid">getFeatureById</h2>
<p>获取指定featureId的feature，如果没有，则返回null</p>
<pre><code class="lang-javascript">// define
getFeatureById(targetFeatureId: string)
// demo
const polygonFeature = new AILabel.Feature.Polygon(...);
gFirstFeatureLayer.addFeature(polygonFeature);
gFirstFeatureLayer.getFeatureById(polygonFeature.id);
</code></pre>
<h2 id="getallfeatures">getAllFeatures</h2>
<p>获取当前Layer.Feature上的所有features</p>
<pre><code class="lang-javascript">// define
getAllFeatures(): Feature[]
// demo
const polygonFeature = new AILabel.Feature.Polygon(...);
gFirstFeatureLayer.addFeature(polygonFeature);
const allFeatures = gFirstFeatureLayer.getAllFeatures();
</code></pre>
<h2 id="removeallfeatures">removeAllFeatures</h2>
<p>移出当前featureLayer上所有features</p>
<pre><code class="lang-javascript">// define
removeAllFeatures()
// demo
const polygonFeature = new AILabel.Feature.Polygon(...);
gFirstFeatureLayer.addFeature(polygonFeature);
gFirstFeatureLayer.removeAllFeatures();
</code></pre>
<h2 id="gettargetfeaturewithpoint">getTargetFeatureWithPoint</h2>
<p>根据point获取捕捉到的features中第一个，如果没有则返回null</p>
<pre><code class="lang-javascript">// define
getTargetFeatureWithPoint(point: IPoint): Feature | null
// demo
gFirstFeatureLayer.getTargetFeatureWithPoint({x,y});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>point</td>
<td>targetPoint点</td>
<td>是</td>
<td>--</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<h1 id="ailabel-layer-marker">AILabel.Layer.Marker</h1>
<p>注记层【注：此层为Map内置图层，不对外暴露二次开发进行实例】；
gMap.markerLayer即为AILabel.Layer.Marker</p>
<h2 id="-">实例化</h2>
<p>内置实例，不需要进行二次开发进行实例</p>
<h2 id="addmarker">addMarker</h2>
<p>添加marker注记</p>
<pre><code class="lang-javascript">// define
addMarker(marker: Marker, option?: IObject)
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>marker</td>
<td>待添加marker</td>
<td>是</td>
<td>--</td>
<td>AILabel.Marker</td>
</tr>
<tr>
<td>option</td>
<td>保留字段</td>
<td>否</td>
<td>--</td>
<td>IObject</td>
</tr>
</tbody>
</table>
<h2 id="removemarkerbyid">removeMarkerById</h2>
<p>移除指定markerId的marker</p>
<pre><code class="lang-javascript">// define
removeMarkerById(targetMarkerId: string)
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);
gMap.markerLayer.removeMarkerById(marker.id);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>targetMarkerId</td>
<td>待删除marker-id</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
</tbody>
</table>
<h2 id="getmarkerbyid">getMarkerById</h2>
<p>获取指定markerId的marker，如果没有，则返回null</p>
<pre><code class="lang-javascript">// define
getMarkerById(targetMarkerId: string)
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);
gMap.markerLayer.getMarkerById(marker.id);
</code></pre>
<h2 id="getallmarkers">getAllMarkers</h2>
<p>获取Layer.Marker上的所有markers</p>
<pre><code class="lang-javascript">// define
getAllMarkers(): Marker[]
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);
const allMarkers = gMap.markerLayer.getAllMarkers();
</code></pre>
<h2 id="removeallmarkers">removeAllMarkers</h2>
<p>移除所有markers</p>
<pre><code class="lang-javascript">// define
removeAllMarkers()
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);
gMap.markerLayer.removeAllMarkers();
</code></pre>
<h1 id="ailabel-layer-text">AILabel.Layer.Text</h1>
<p>文本图层，显示文本对象</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, props: IObject = {}, style: ILayerStyle = {})
// demo
const gFirstTextLayer = new AILabel.Layer.Text(
   &#39;first-layer-text&#39;, // id
   {name: &#39;第一个文本图层&#39;}, // props
   {zIndex: 12, opacity: 1} // style
);
gMap.addLayer(gFirstTextLayer);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>ILayerStyle-上文</td>
</tr>
</tbody>
</table>
<h2 id="addtext">addText</h2>
<p>添加text文本</p>
<pre><code class="lang-javascript">// define
addText(text: Text, option?: ITextAddOption)
// demo (AILabel.Text见下文)
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>待添加text</td>
<td>是</td>
<td>--</td>
<td>Text</td>
</tr>
<tr>
<td>option</td>
<td>可选配置项</td>
<td>否</td>
<td>{clear: false}</td>
<td>ITextAddOption</td>
</tr>
</tbody>
</table>
<p><strong>IFeatureAddOption</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>clear</td>
<td>添加text是否清空当前layer上已存在的texts</td>
<td>否</td>
<td>false</td>
<td>boolean</td>
</tr>
</tbody>
</table>
<h2 id="removetextbyid">removeTextById</h2>
<p>移除指定textId的text</p>
<pre><code class="lang-javascript">// define
removeTextById(targetTextId: string)
// demo
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);
gFirstTextLayer.removeTextById(text.id);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>targetTextId</td>
<td>待删除text-id</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
</tbody>
</table>
<h2 id="gettextbyid">getTextById</h2>
<p>获取指定textId的text，如果没有，则返回null</p>
<pre><code class="lang-javascript">// define
getTextById(targetTextId: string)
// demo
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);
gFirstTextLayer.getTextById(text.id);
</code></pre>
<h2 id="getalltexts">getAllTexts</h2>
<p>获取Layer.Text上的所有texts对象</p>
<pre><code class="lang-javascript">// define
getAllTexts(): Text[]
// demo
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);
const allTexts = gFirstTextLayer.getAllTexts();
</code></pre>
<h2 id="removealltexts">removeAllTexts</h2>
<p>移除所有texts</p>
<pre><code class="lang-javascript">// define
removeAllTexts()
// demo
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);
gFirstTextLayer.removeAllTexts();
</code></pre>
<h1 id="ailabel-layer-mask">AILabel.Layer.Mask</h1>
<p>文本图层，显示文本对象</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, props: IObject = {}, style: ILayerStyle = {})
// demo
const gFirstMaskLayer = new AILabel.Layer.Mask(
   &#39;first-layer-mask&#39;, // id
   {name: &#39;第一个涂抹图层&#39;}, // props
   {zIndex: 11, opacity: .5} // style
);
gMap.addLayer(gFirstMaskLayer);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>ILayerStyle-上文</td>
</tr>
</tbody>
</table>
<h2 id="addaction">addAction</h2>
<p>添加涂抹Action，此处我们把绘制【DrawAction】/擦除【ClearAction】/数据回显【ImageAction】定义为action</p>
<pre><code class="lang-javascript">// define
addAction(action: Action, option?: IObject)
// demo (AILabel.Action见下文)
const drawAction = new AILabel.Action.Draw(...);
gFirstMaskLayer.addAction(drawAction);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>action</td>
<td>待添加Action</td>
<td>是</td>
<td>--</td>
<td>Action</td>
</tr>
<tr>
<td>option</td>
<td>保留字段-可选配置项</td>
<td>否</td>
<td></td>
<td>IObject</td>
</tr>
</tbody>
</table>
<p><strong>Action</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>Draw</td>
<td>涂抹Action</td>
<td>Action.Draw-见下文</td>
</tr>
<tr>
<td>Clear</td>
<td>擦除Action</td>
<td>Action.Clear-见下文</td>
</tr>
<tr>
<td>Image</td>
<td>回显数据Action</td>
<td>Action.Image-见下文</td>
</tr>
</tbody>
</table>
<h2 id="removeactionbyid">removeActionById</h2>
<p>移除指定action</p>
<pre><code class="lang-javascript">// define
removeActionById(targetActionId: string)
// demo (AILabel.Action见下文)
const drawAction = new AILabel.Action.Draw(...);
gFirstMaskLayer.addAction(drawAction);
gFirstMaskLayer.removeActionById(drawAction.id);
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>targetActionId</td>
<td>待删除action-id</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
</tbody>
</table>
<h2 id="removeallactions">removeAllActions</h2>
<p>移除所有actions</p>
<pre><code class="lang-javascript">// define
removeAllActions()
// demo (AILabel.Action见下文)
const drawAction = new AILabel.Action.Draw(...);
gFirstMaskLayer.addAction(drawAction);
gFirstMaskLayer.removeAllActions();
</code></pre>
<h2 id="getallactions">getAllActions</h2>
<p>获取Layer.Mask上的所有actions</p>
<pre><code class="lang-javascript">// define
getAllActions(): Action[]
// demo (AILabel.Action见下文)
const drawAction = new AILabel.Action.Draw(...);
gFirstMaskLayer.addAction(drawAction);
const allActions = gFirstMaskLayer.getAllActions();
</code></pre>
<h2 id="getrledata">getRleData</h2>
<p>根据分类获取分类分类rle数据, 截取某个范围的rle数据</p>
<pre><code class="lang-javascript">// define
getRleData(bounds: IRectShape)
// demo (AILabel.Action见下文)
const imageAction = new AILabel.Action.Image(...);
const drawAction = new AILabel.Action.Draw(...);
const clearAction = new AILabel.Action.Clear(...);
gFirstMaskLayer.addAction(imageAction);
gFirstMaskLayer.addAction(drawAction);
gFirstMaskLayer.addAction(clearAction);
const rleData = gFirstMaskLayer.getRleData({x: -250, y: 177, width: 500, height: 354});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>bounds</td>
<td>矩形范围</td>
<td>是</td>
<td>--</td>
<td>IRectShape-见上文</td>
</tr>
</tbody>
</table>
<h1 id="ailabel-feature">AILabel.Feature</h1>
<p>Feature.Point, Feature.Line, Feature.Polyline, Feature.Polygon, Feature.Rect, Feature.Circle等子类的基类</p>
<h2 id="-">实例化</h2>
<p>子类复写构造函数</p>
<h2 id="updateshape">updateShape</h2>
<p>改变矢量要素shape信息</p>
<pre><code class="lang-javascript">// define
updateShape(shape: IFeatureShape)
// demo
const feature = new AILabel.Feature.Point(...);
feature.updateShape(newPointShape)
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>shape</td>
<td>待更新的图形shape信息</td>
<td>是</td>
<td>--</td>
<td>IFeatureShape</td>
</tr>
</tbody>
</table>
<p><strong>IFeatureShape枚举</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>shape</td>
<td>待更新的图形shape信息</td>
<td>IFeatureShape</td>
</tr>
</tbody>
</table>
<h2 id="setstyle">setStyle</h2>
<p>设置feature样式</p>
<pre><code class="lang-javascript">// define
setStyle(style: IFeatureStyle, option?: IObject)
// demo
const feature = new AILabel.Feature.Point(...);
feature.setStyle({fillStyle: &#39;#FF0000&#39;});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>style</td>
<td>待更新的图形style</td>
<td>是</td>
<td>--</td>
<td>IFeatureStyle</td>
</tr>
<tr>
<td>option</td>
<td>保留字段-可选配置项</td>
<td>否</td>
<td>--</td>
<td>IObject</td>
</tr>
</tbody>
</table>
<h2 id="capturewithpoint">captureWithPoint</h2>
<p>判断point是否捕捉到当前feature</p>
<pre><code class="lang-javascript">// define
captureWithPoint(point: IPoint): boolean
// demo
const feature = new AILabel.Feature.Point(...);
const isCaptured = feature.captureWithPoint{x, y};
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>point</td>
<td>捕捉点</td>
<td>是</td>
<td>--</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<h1 id="ailabel-feature-point">AILabel.Feature.Point</h1>
<p>点对象【实心】</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, shape: IPointShape, props: IObject = {}, style: IFeatureStyle = {}, option?: IObject)
// demo
const gFirstFeaturePoint = new AILabel.Feature.Point(
   &#39;first-feature-point&#39;, // id
   {x: -100, y: -100, sr: 3}, // shape
   {name: &#39;第一个点&#39;}, // props
   {fillStyle: &#39;#00f&#39;} // style
);
gFirstFeatureLayer.addFeature(gFirstFeaturePoint);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>shape</td>
<td>空间信息</td>
<td>是</td>
<td>--</td>
<td>IPointShape</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>IFeatureStyle-上文</td>
</tr>
<tr>
<td>option</td>
<td>保留字段可选配置项</td>
<td>否</td>
<td>--</td>
<td>IObject</td>
</tr>
</tbody>
</table>
<p><strong>IPointShape</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>坐标x</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>y</td>
<td>坐标y</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>r</td>
<td>半径（实际坐标系半径，会伴随放大缩小变化）</td>
<td>否</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>sr</td>
<td>半径（屏幕坐标系半径，不会伴随放大缩小变化）</td>
<td>否</td>
<td>--</td>
<td>number</td>
</tr>
</tbody>
</table>
<p>注：r 和 sr 【sr与r只会存在一个，如果同时存在，r优先级高】</p>
<h2 id="updateshape">updateShape</h2>
<p>见AILabel.Feature</p>
<h2 id="setstyle">setStyle</h2>
<p>见AILabel.Feature</p>
<h2 id="capturewithpoint">captureWithPoint</h2>
<p>见AILabel.Feature</p>
<h1 id="ailabel-feature-line">AILabel.Feature.Line</h1>
<p>线段对象</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, shape: ILineShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstFeatureLine = new AILabel.Feature.Line(
   &#39;first-feature-line&#39;, // id
   {start: {x: 10, y: 10}, end: {x: 100, y: -100}, width: 10}, // shape
   {name: &#39;第一个线段&#39;}, // props
   {strokeStyle: &#39;#FF4500&#39;, lineCap: &#39;round&#39;} // style
);
gFirstFeatureLayer.addFeature(gFirstFeatureLine);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>shape</td>
<td>空间信息</td>
<td>是</td>
<td>--</td>
<td>ILineShape</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>IFeatureStyle-上文</td>
</tr>
</tbody>
</table>
<p><strong>ILineShape</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>start</td>
<td>起点</td>
<td>是</td>
<td>--</td>
<td>IPoint-见上文</td>
</tr>
<tr>
<td>end</td>
<td>终点</td>
<td>是</td>
<td>--</td>
<td>IPoint-见上文</td>
</tr>
<tr>
<td>width</td>
<td>线宽（实际坐标系宽）；如果不设置，将会取style-lineWidth绘制</td>
<td>否</td>
<td>--</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="updateshape">updateShape</h2>
<p>见AILabel.Feature</p>
<h2 id="setstyle">setStyle</h2>
<p>见AILabel.Feature</p>
<h2 id="capturewithpoint">captureWithPoint</h2>
<p>见AILabel.Feature</p>
<h1 id="ailabel-feature-polyline">AILabel.Feature.Polyline</h1>
<p>多段线对象</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, shape: IPolylineShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const polylineFeature = new AILabel.Feature.Polyline(
  &#39;first-feature-polyline&#39;, // id
  {points: data, width}, // shape
  {name: &#39;第一个矢量图层&#39;}, // props
  drawingStyle // style
);
gFirstFeatureLayer.addFeature(polylineFeature);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>shape</td>
<td>空间信息</td>
<td>是</td>
<td>--</td>
<td>IPolylineShape</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>IFeatureStyle-上文</td>
</tr>
</tbody>
</table>
<p><strong>IPolylineShape</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>points</td>
<td>多段线节点集合</td>
<td>是</td>
<td>--</td>
<td>IPoint[]-见上文</td>
</tr>
<tr>
<td>width</td>
<td>线宽（实际坐标系宽）；如果不设置，将会取style-lineWidth绘制</td>
<td>否</td>
<td>--</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="updateshape">updateShape</h2>
<p>见AILabel.Feature</p>
<h2 id="setstyle">setStyle</h2>
<p>见AILabel.Feature</p>
<h2 id="capturewithpoint">captureWithPoint</h2>
<p>见AILabel.Feature</p>
<h1 id="ailabel-feature-rect">AILabel.Feature.Rect</h1>
<p>矩形对象</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, shape: IRectShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstFeatureRect = new AILabel.Feature.Rect(
   &#39;first-feature-rect&#39;, // id
   {x: -50, y: 50, width: 100, height: 100}, // shape
   {name: &#39;第一个矢量图层&#39;}, // props
   {strokeStyle: &#39;#808080&#39;, lineWidth: 1} // style
);
gFirstFeatureLayer.addFeature(gFirstFeatureRect);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>shape</td>
<td>空间信息</td>
<td>是</td>
<td>--</td>
<td>IRectShape</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>IFeatureStyle-上文</td>
</tr>
</tbody>
</table>
<p><strong>IRectShape</strong>
见上文</p>
<h2 id="getpoints">getPoints</h2>
<p>获取矩形四个顶点坐标集合</p>
<pre><code class="lang-javascript">// define
getPoints(): IPoint[]
// demo
const gFirstFeatureRect = new AILabel.Feature.Rect(...);
const rectPoints = gFirstFeatureRect.getPoints();
</code></pre>
<h2 id="updateshape">updateShape</h2>
<p>见AILabel.Feature</p>
<h2 id="setstyle">setStyle</h2>
<p>见AILabel.Feature</p>
<h2 id="capturewithpoint">captureWithPoint</h2>
<p>见AILabel.Feature</p>
<h1 id="ailabel-feature-polygon">AILabel.Feature.Polygon</h1>
<p>多边形对象</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, shape: IPolygonShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstFeaturePolygon = new AILabel.Feature.Polygon(
   &#39;first-feature-polygon&#39;, // id
   {points: [
       {x: 0, y: 0}, {x: 100, y: 100},
       {x: 100, y: 200}
   ]}, // shape
   {name: &#39;第一个多边形&#39;}, // props
   {strokeStyle: &#39;#FFD500&#39;, lineWidth: 1} // style
);
gFirstFeatureLayer.addFeature(gFirstFeaturePolygon);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>shape</td>
<td>空间信息</td>
<td>是</td>
<td>--</td>
<td>IPolygonShape</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>IFeatureStyle-上文</td>
</tr>
</tbody>
</table>
<p><strong>IPolygonShape</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>points</td>
<td>多边形顶点集合</td>
<td>是</td>
<td>--</td>
<td>IPoint[]-见上文</td>
</tr>
<tr>
<td>inner</td>
<td>保留字段</td>
<td>否</td>
<td>--</td>
<td>[]</td>
</tr>
</tbody>
</table>
<h2 id="updateshape">updateShape</h2>
<p>见AILabel.Feature</p>
<h2 id="setstyle">setStyle</h2>
<p>见AILabel.Feature</p>
<h2 id="capturewithpoint">captureWithPoint</h2>
<p>见AILabel.Feature</p>
<h1 id="ailabel-feature-circle">AILabel.Feature.Circle</h1>
<p>圆对象</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, shape: ICircleShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstFeatureCircle = new AILabel.Feature.Circle(
   &#39;first-feature-circle&#39;, // id
   {cx: 0, cy: 0, r: 100}, // shape
   {name: &#39;第一个矢量图层&#39;}, // props
   {fillStyle: &#39;#F4A460&#39;, strokeStyle: &#39;#D2691E&#39;, globalAlpha: 1} // style
);
gFirstFeatureLayer.addFeature(gFirstFeatureCircle);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>shape</td>
<td>空间信息</td>
<td>是</td>
<td>--</td>
<td>ICircleShape</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>IFeatureStyle-上文</td>
</tr>
</tbody>
</table>
<p><strong>ICircleShape</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>cx</td>
<td>坐标x</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>cy</td>
<td>坐标y</td>
<td>是</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>r</td>
<td>半径（实际坐标系半径，会伴随放大缩小变化）</td>
<td>否</td>
<td>--</td>
<td>number</td>
</tr>
<tr>
<td>sr</td>
<td>半径（屏幕坐标系半径，不会伴随放大缩小变化）</td>
<td>否</td>
<td>--</td>
<td>number</td>
</tr>
</tbody>
</table>
<p>注：r 和 sr 【sr与r只会存在一个，如果同时存在，r优先级高】</p>
<h2 id="updateshape">updateShape</h2>
<p>见AILabel.Feature</p>
<h2 id="setstyle">setStyle</h2>
<p>见AILabel.Feature</p>
<h2 id="capturewithpoint">captureWithPoint</h2>
<p>见AILabel.Feature</p>
<h1 id="ailabel-action">AILabel.Action</h1>
<p>Action.Draw, Action.Clear, Action.Image等子类的基类</p>
<h2 id="-">实例化</h2>
<p>子类复写构造函数</p>
<h1 id="ailabel-action-draw">AILabel.Action.Draw</h1>
<p>涂抹对象【众所周知，涂抹/擦除的动作分为down-&gt;move-&gt;up，实际上绘制的就是一条具有宽度的具有多个点的多段线】</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, category: string, shape: IDrawActionShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const drawMaskAction = new AILabel.Mask.Draw(
  &#39;first-action-draw&#39;, // id
  &#39;铅笔&#39;,
  {points: data, width}, // shape
  {name: &#39;港币&#39;, price: &#39;1元&#39;}, // props
  {strokeStyle: &#39;#FF0000&#39;} // style
);
gFirstMaskLayer.addAction(drawMaskAction);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>category</td>
<td>当前action类型</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>shape</td>
<td>空间信息</td>
<td>是</td>
<td>--</td>
<td>IDrawActionShape</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>是</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式</td>
<td>是</td>
<td>--</td>
<td>IFeatureStyle-上文</td>
</tr>
</tbody>
</table>
<p><strong>IDrawActionShape</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>points</td>
<td>多段线节点集合</td>
<td>是</td>
<td>--</td>
<td>IPoint[]-见上文</td>
</tr>
<tr>
<td>width</td>
<td>线宽（实际坐标系宽）；如果不设置，将会取style-lineWidth绘制涂抹</td>
<td>否</td>
<td>--</td>
<td>number</td>
</tr>
</tbody>
</table>
<h2 id="setstyle">setStyle</h2>
<p>设置action样式【除Action.Image】</p>
<pre><code class="lang-javascript">// define
setStyle(style: IFeatureStyle, option?: IObject)
// demo
const drawAction = new AILabel.Action.Draw(...);
drawAction.setStyle({strokeStyle: &#39;#FF0000&#39;});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>style</td>
<td>待更新的图形style</td>
<td>是</td>
<td>--</td>
<td>IFeatureStyle</td>
</tr>
<tr>
<td>option</td>
<td>保留字段-可选配置项</td>
<td>否</td>
<td>--</td>
<td>IObject</td>
</tr>
</tbody>
</table>
<h1 id="ailabel-action-clear">AILabel.Action.Clear</h1>
<p>涂抹擦除对象【众所周知，涂抹/擦除的动作分为down-&gt;move-&gt;up，实际上绘制的就是一条具有宽度的具有多个点的多段线】</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, shape: IDrawActionShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const clearMaskAction = new AILabel.Mask.Clear(
  &#39;first-action-clear&#39;, // id
  {points: data, width} // shape
);
gFirstMaskLayer.addAction(clearMaskAction);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>shape</td>
<td>空间信息</td>
<td>是</td>
<td>--</td>
<td>IDrawActionShape</td>
</tr>
<tr>
<td>props</td>
<td>原则上不需要</td>
<td>否</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>原则上不需要</td>
<td>否</td>
<td>--</td>
<td>IFeatureStyle-上文</td>
</tr>
</tbody>
</table>
<p><strong>IDrawActionShape</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>points</td>
<td>多段线节点集合</td>
<td>是</td>
<td>--</td>
<td>IPoint[]-见上文</td>
</tr>
<tr>
<td>width</td>
<td>线宽（实际坐标系宽）；如果不设置，将会取style-lineWidth绘制擦除</td>
<td>否</td>
<td>--</td>
<td>number</td>
</tr>
</tbody>
</table>
<h1 id="ailabel-action-image">AILabel.Action.Image</h1>
<p>涂抹数据的回显时，如果返回rle数据，前端需要需要进行像素级处理，此时相当耗性能，此对象的设计就是为了既能满足涂抹数据的回显，又能尽可能最大的优化性能而产生；
注：对后端要求：需要按照把每一个分类涂抹rle数据生成图片指定大小的二值.png图片</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, category: string, image: IImageInfo, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstMaskImageAction = new AILabel.Mask.Image(
   &#39;first-image-action&#39;, // id
   &#39;钢笔&#39;,
   {
       src: &#39;./mask_min.png&#39;,
       width: 500,
       height: 354,
       crossOrigin: false,
       position: { // 图片左上角坐标
           x: -250,
           y: 177
       }
   }, // imageInfo
   {}
);
gFirstMaskLayer.addAction(gFirstMaskImageAction);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>shape</td>
<td>空间信息</td>
<td>是</td>
<td>--</td>
<td>IImageInfo</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>否</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>原则上不需要</td>
<td>否</td>
<td>--</td>
<td>IFeatureStyle-上文</td>
</tr>
</tbody>
</table>
<p><strong>IImageInfo</strong>
见上文</p>
<h1 id="ailabel-marker">AILabel.Marker</h1>
<p>注记marker对象</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, marker: IMarkerInfo, props: IObject = {}, option: IObject = {})
// demo
const gFirstMarker = new AILabel.Marker(
   &#39;first-marker&#39;, // id
   {
       src: &#39;./marker.png&#39;,
       position: { // marker坐标位置
           x: 0,
           y: 0
       },
       offset: {
           x: -16,
           y: 32
       }
   }, // markerInfo
   {name: &#39;第一个marker注记&#39;} // props
);
gMap.markerLayer.addMarker(gFirstMarker);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>marker</td>
<td>marker信息</td>
<td>是</td>
<td>--</td>
<td>IMarkerInfo</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>否</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>option</td>
<td>保留字段</td>
<td>否</td>
<td>--</td>
<td>IObject</td>
</tr>
</tbody>
</table>
<p><strong>IMarkerInfo</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>icon路径</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>position</td>
<td>位置信息</td>
<td>是</td>
<td>--</td>
<td>IPoint</td>
</tr>
<tr>
<td>offset</td>
<td>偏移量（屏幕坐标）</td>
<td>否</td>
<td>{x: 0, y: 0}</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<h2 id="enabledragging">enableDragging</h2>
<p>启用marker可拖拽【默认不可拖拽】</p>
<pre><code class="lang-javascript">// define
enableDragging(): void
// demo
const gFirstMarker = new AILabel.Marker(...);
gFirstMarker.enableDragging();
</code></pre>
<h2 id="disabledragging">disableDragging</h2>
<p>禁用marker可拖拽【默认不可拖拽】</p>
<pre><code class="lang-javascript">// define
disableDragging(): void
// demo
const gFirstMarker = new AILabel.Marker(...);
gFirstMarker.disableDragging();
</code></pre>
<h2 id="updateposition">updatePosition</h2>
<p>更新marker的位置</p>
<pre><code class="lang-javascript">// define
updatePosition(position: IPoint)
// demo
const gFirstMarker = new AILabel.Marker(...);
gFirstMarker.updatePosition({x: 0, y: 0});
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>position</td>
<td>位置信息</td>
<td>是</td>
<td>--</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<h2 id="events">events</h2>
<p>事件监听</p>
<pre><code class="lang-javascript">// define
events.on(eventType: EMarkerEventType, callback: Function);
// demo
marker.events.on(&#39;click&#39;, () =&gt; {console.log(&#39;marker clicked&#39;)});
</code></pre>
<p><strong>params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>eventType</td>
<td>时间枚举类型</td>
<td>是</td>
<td>--</td>
<td>EMarkerEventType</td>
</tr>
<tr>
<td>callback</td>
<td>回调函数</td>
<td>是</td>
<td>--</td>
<td>Function</td>
</tr>
</tbody>
</table>
<p><strong>EMarkerEventType</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>click</td>
<td>单击事件</td>
<td>string</td>
</tr>
<tr>
<td>mouseDown</td>
<td>mouseDown事件</td>
<td>string</td>
</tr>
<tr>
<td>mouseUp</td>
<td>mouseUp事件</td>
<td>string</td>
</tr>
<tr>
<td>mouseOver</td>
<td>鼠标移入</td>
<td>string</td>
</tr>
<tr>
<td>mouseOut</td>
<td>鼠标移出</td>
<td>string</td>
</tr>
<tr>
<td>dragStart</td>
<td>拖拽前</td>
<td>string</td>
</tr>
<tr>
<td>dragging</td>
<td>拖拽中</td>
<td>string</td>
</tr>
<tr>
<td>dragEnd</td>
<td>拖拽结束（会返回拖拽后的最新位置信息）</td>
<td>string</td>
</tr>
<tr>
<td>rightClick</td>
<td>右键单击</td>
<td>string</td>
</tr>
</tbody>
</table>
<h1 id="ailabel-text">AILabel.Text</h1>
<p>text文本对象</p>
<h2 id="-">实例化</h2>
<pre><code class="lang-javascript">// define
constructor(id: string, text: ITextInfo, props: IObject = {}, style: ITextStyle = {})
// demo
const gFirstText = new AILabel.Text(
   &#39;first-text&#39;, // id
   {text: &#39;中华人民共和国&#39;, position: {x: 0, y: 0}, offset: {x: 0, y: 0}}, // shape
   {name: &#39;第一个文本对象&#39;}, // props
   {fillStyle: &#39;#F4A460&#39;, strokeStyle: &#39;#D2691E&#39;, background: true, globalAlpha: 1, fontColor: &#39;#0f0&#39;} // style
);
gFirstTextLayer.addText(gFirstText);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>唯一标识</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>text</td>
<td>text信息</td>
<td>是</td>
<td>--</td>
<td>ITextInfo</td>
</tr>
<tr>
<td>props</td>
<td>属性信息</td>
<td>否</td>
<td>--</td>
<td>IObject</td>
</tr>
<tr>
<td>style</td>
<td>样式信息</td>
<td>否</td>
<td>--</td>
<td>ITextStyle</td>
</tr>
</tbody>
</table>
<p><strong>ITextInfo</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>text文字</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
<tr>
<td>position</td>
<td>位置信息</td>
<td>是</td>
<td>--</td>
<td>IPoint</td>
</tr>
<tr>
<td>offset</td>
<td>偏移量（屏幕坐标）</td>
<td>否</td>
<td>{x: 0, y: 0}</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<p><strong>ITextStyle</strong>、
继承自IFeatureStyle，新增属性字段如下</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>background</td>
<td>是否展示文字背景</td>
<td>否</td>
<td>--</td>
<td>boolean</td>
</tr>
<tr>
<td>fontColor</td>
<td>字体颜色</td>
<td>否</td>
<td>--</td>
<td>string</td>
</tr>
</tbody>
</table>
<h2 id="updateposition">updatePosition</h2>
<p>更新text的位置</p>
<pre><code class="lang-javascript">// define
updatePosition(position: IPoint)
// demo
const gFirstText = new AILabel.Text(...);
gFirstText.updatePosition({x: 0, y: 0});
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>position</td>
<td>位置信息</td>
<td>是</td>
<td>--</td>
<td>IPoint</td>
</tr>
</tbody>
</table>
<h2 id="updatetext">updateText</h2>
<p>更新text的文本</p>
<pre><code class="lang-javascript">// define
updateText(text: string)
// demo
const gFirstText = new AILabel.Text(...);
gFirstText.updateText(&#39;中华人民共和国&#39;);
</code></pre>
<p><strong>Params</strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>是否必填</th>
<th>默认</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>待更新文本</td>
<td>是</td>
<td>--</td>
<td>string</td>
</tr>
</tbody>
</table>
<h1 id="ailabel-util">AILabel.Util</h1>
<p>通用工具方法</p>
<h2 id="mathutil-getmiddlepoint">MathUtil.getMiddlePoint</h2>
<p>获取两点之间的中心点</p>
<pre><code class="lang-javascript">getMiddlePoint(start: IPoint, end: IPoint): IPoint
</code></pre>
<h2 id="mathutil-distance">MathUtil.distance</h2>
<p>计算两点之间的距离</p>
<pre><code class="lang-javascript">distance(start: IPoint, end: IPoint): number
</code></pre>
<h2 id="eventutil-getbuttonindex">EventUtil.getButtonIndex</h2>
<p>获取鼠标左右键index</p>
<pre><code class="lang-javascript">getButtonIndex(event: MouseEvent): number
</code></pre>
<h1 id="-">联系作者</h1>
<h2 id="author">author</h2>
<ul>
<li>author: 丁扬</li>
<li>email: <a href="mailto:dingyang9642@126.com">dingyang9642@126.com</a></li>
<li>wx: dingyang9642</li>
<li>qq: 378301400</li>
</ul>
<h1 id="-">开源协议</h1>
<h2 id="apache-license">Apache License</h2>
<p>请遵循：Apache License 2.0</p>

          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)

    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>
